<template>
  <div class="bottom-view">
      <el-card class="view">
          <template slot="header">关键词搜索</template>
          <div class="content">
              <div class="chart-warp">
                  <div class="chart">
                      <div class="title">搜索用户数</div>
                      <div class="count">113,918</div>
                      <div class="echarts">图表</div>
                  </div>
                  <div class="chart">
                      <div class="title">搜索量</div>
                      <div class="count">214,215</div>
                      <div class="echarts">图表</div>
                  </div>
              </div>
          </div>
      </el-card>
      <el-card class="view">
          <template slot="header">
              <span>分类销售排行</span>
              <el-radio-group v-model="radioSelect" size="small">
                  <el-radio-button  label="品类"></el-radio-button>
                  <el-radio-button  label="商品"></el-radio-button>
              </el-radio-group>
          </template>
          <div></div>
      </el-card>
  </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
  name: 'BottomView',
  data(){
      return{
          radioSelect:"品类"
      }
  },
  computed: {
      ...mapState({
         searchWord:state => state.data.reportData.searchWord || [],
         saleRank:state => state.data.reportData.saleRank || [],
         
      }),
      /**根据searchword计算出图表显示所需要的所有数据
       * 关键字的数组:wordList:xAxiosData
       * 搜索量的数组:countList 右侧的series的data
       * 搜索用户量的数组:userList 左侧的series的data
       * 搜索量的总数:totalCount
       * 搜索用户量的总数:totalUser 
       * 
      */
     lineCartData(){
         const data = {
             wordList:[],
             
         }
     }
  },

}
</script>

<style lang="scss"scoped>
.bottom-view{
    display:flex;
    margin-top:20px ;
    .view{
        flex:1;
        &:first-child{
            margin-right: 10px;
        }
        &:last-child{
            margin-left: 10px;
        }
        ::v-deep .el-card__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
      }
      .content{
          height: 450px;
          .chart-warp{
              display: flex;
              .chart{
                  flex:1;
                  &:first-child{
                      margin-right: 5px;
                  }
                  &:last-child{
                      margin-left: 5px;
                  }
                  .title{
                      font-size:14px;
                      color:#666;
                  }
                  .count{
                      font-size:25px;
                      letter-spacing: 1px;
                  }
              }
          }
      }
    }
}
</style>